<template>
  <div class="goods">
    <div @click="$emit('toDetails',item.goodId)" class="goods-item" v-for="(item,index) in couponListData">
      <div class="goods-pic"><img v-lazy=" item.mainPic " alt=""></div>
      <div class="details">
        <p class="lingquan">领券减{{item.couponValue | getCount}}元</p>
        <p class="baoyou oneLine">{{item.name}}</p>
        <div class="priceBox ">
          <span class="price "><span style="font-weight: normal;font-size:12px; ">￥</span>{{item.priceAfterCoupon | getCount}} <span
            style="font-size:9px ;color:#a6a4b2">券后价</span></span>
          <span class="count flex-grow-0 ">已抢{{item.couponUse}}件</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      couponListData:{
        type:Array,
        default:[],
      }
    }
  }
</script>
<style lang="less">

  .goods {
    font-size: 0;
    margin-top: 10px;
    .goods-item {
      display: inline-block;
      width: 48.6%;
      margin: 0 0.05rem 10px;
      .goods-pic {
        >img{
          height: 3.64rem;

        }
      }
      .details {
        background: #fff;
        padding: .2rem;
        .lingquan {

          font-size: 13px;
        }
        .baoyou {
          font-size: 12px;
        }
        .priceBox {
          display: flex;
          span {
            &.price {
              flex-grow: 1;
              text-align: left;
              font-size: 20px;
              font-weight: 500;
              color: @red;
            }
            &.count {
              flex-grow: 0;
              text-align: right;
              font-size: 10px;
              margin-top: 10px;
              color: #a6a4b2;
            }
          }

        }
      }
    }
  }

</style>
